<!-- 时区(UTC，亚洲上海)切换组件 -->
<template>
  <div v-loading="loading" class="time-zone-box" element-loading-background="rgba(0, 0, 0, 0.8)"
    element-loading-spinner="time-spinner">
    <el-dropdown>
      <span class="el-dropdown-link pointer">
        <span style="font-size: 14px;">{{ timeZone==='UTC'?'UTC':'亚洲/上海' }}</span>
        <i class="el-icon-arrow-down el-icon--right"  v-if="$route.name!=='CreatePut'"></i>
      </span>
      <el-dropdown-menu slot="dropdown" v-if="$route.name!=='CreatePut'">
        <el-dropdown-item :disabled="timeZone==='UTC'" :style="{color:timeZone==='UTC'?'#24bebe':'#39444E'}"
          @click.native="changeTimeZone('UTC')">UTC</el-dropdown-item>
        <el-dropdown-item :disabled="timeZone!=='UTC'" :style="{color:timeZone!=='UTC'?'#24bebe':'#39444E'}"
          @click.native="changeTimeZone('ORTZ')">亚洲/上海</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>



    <em>{{ time }}</em>
  </div>
</template>
<script>
  import dayjs from 'dayjs'
  const moment = dayjs
  var utc = require('dayjs/plugin/utc')
  var timezone = require('dayjs/plugin/timezone')
  let timer
  export default {
    name: '', // ·������
    data() {
      return {
        time: undefined,
        loading: false
      }
    },
    computed: {
      // 时区
      timeZone() {
        return this.$store.state.user.timeZone
      }

    },
    watch: {

    },
    // ������
    created() {},
    // ���غ�
    mounted() {
      this.setTime()
    },
    // ���ٺ�
    destroyed() {
      // 销毁定时器
      if (timer) {
        clearInterval(timer)
      }
    },

    // ����
    methods: {
      setTime() {
        moment.extend(utc)
        moment.extend(timezone)
        timer = setInterval(() => {
          if (this.timeZone === 'UTC') {
            this.time = moment().utc().format('YYYY-MM-DD  HH : mm : ss')
          } else {
            this.time = moment().format('YYYY-MM-DD  HH : mm : ss')
          }
        }, 1000)
      },

      changeTimeZone(type) {
        this.$store.commit('user/SET_TIMEZONE', type)
        setTimeout(() => {
          this.setTime()
        }, 900)
      }
    }
  }
</script>

<style scoped lang="scss">
  @import '~@/styles/variables.scss';

  .time-zone-box {
    padding-right: 6px;
    color: $mainColor1;
    font-size: 14px;

    >span {
      display: inline-block;
      width: 1px;
      height: 20px;
      background: #BDC5CB;
      font-size: 0;
      margin: 0 20px;
    }
  }

  ::v-deep.el-dropdown {
    margin-right: 8px;
    color: $mainColor1;
  }
</style>
